<template>
  <div class="keyboard">
    <div :class="['button','green','c1',this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <span>暂停(P)</span>
    </div>

    <div :class="['button','green','c2',this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <span>音效(S)</span>
    </div>

    <div :class="['button','red','c3',this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <span>重玩(R)</span>
    </div>

    <div :class="['b','button','blue',,this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <span>掉落(SPACE)</span>
    </div>


    <div :class="['button','blue','r1',this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <em></em>
      <span v-if="this.$store.state.changeCss">上移</span>
      <span v-else>旋转</span>
    </div>

    <div :class="['button','blue','r3',this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <em></em>
      <span>右移</span>
    </div>

    <div :class="['button','blue','r2',this.$store.state.changeCss?'c':'']" style="top:80px ">
      <i></i>
      <em></em>
      <span>左移</span>
    </div>


    <div :class="['button','blue','r4']" style="top:80px ">
      <i></i>
      <em></em>
      <span>下移</span>
    </div>

  </div>
</template>


<script src="./index.js">


</script>

<style lang="less">
@import './index.less';
</style>